/**
 * xiongsha
 * 预约成功
 * 2020-05-23
 * */
import React, { useEffect, useState } from 'react';
import { RouteComponentProps } from 'react-router';
import { Toast } from 'antd-mobile';
import Header from '@src/components/common/Header';
import request from '@src/utils/request';
import './style.less';

const Subscribe = (props: RouteComponentProps) => {
  const [content, setContent] = useState<{ [lableProps: string]: string }>({});
  const phone = (props.match.params as any).phone;
  useEffect(() => {
    //   获取订单详情
    request('get', '/wp-json/ec-visit/v1/detail', {
      phone: phone,
    }).then((res) => {
      const data = res.data;
      if (data.code === 0) {
        setContent(data.data);
      } else {
        Toast.fail(data.message, 1);
      }
    });
    renderMap();
  }, []);

  const renderMap = () => {};
  return (
    <div className="subscribe">
      <Header>预约结果</Header>
      <div className="subscribe-content">
        <div className="subscribe-title">
          <img className="subscribe-success" src={require('@src/img/icon-success.png')} alt="" />
          预约成功！
        </div>
        <ul className="content-list">
          <li>
            <span className="label">参 观 人：</span>
            {content.type === '1' ? content.name : '团体'}
          </li>
          <li>
            <span className="label">入场凭证：</span>
            参观人身份证
          </li>
          <li>
            <span className="label">有 限 期：</span>
            {content.date} {content.time}
          </li>
          <li>
            <span className="label">联 系 人：</span>
            {content.type === '1' ? content.name : content.group_leader_name}
          </li>
          <li>
            <span className="label">联系电话：</span>
            {content.type === '1' ? content.phone : content.group_leader_phone}
          </li>
          <li>
            <span className="label">预约编号：</span>
            {content.num}
          </li>
          <li>
            <span className="label">备 注：</span>
            所有观众均需实名预约（含儿童），请持本人身份证（未办理身份证的儿童家长出示预约订单），在预约时段内出示粤/穗康码、经体温检测正常后入馆。
          </li>
        </ul>
      </div>
      <a
        className="goAdress"
        href="https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:23.700251,113.728993;title:生态设计小镇;addr:广东省广州市从化区良口镇共青路1号&key=ZNRBZ-2BAHK-S4GJQ-AU4RT-AFMYV-KZBGE&referer=生态大会-H5端"
      >
        查看位置
      </a>
      <div
        className="btn"
        onClick={() => {
          props.history.push(`/orderdetail/${phone}`);
        }}
      >
        查看订单
      </div>
    </div>
  );
};

export default Subscribe;
